<template>
  <div>
    <!--选择框-->
    <el-form ref="options" :inline="true" :model="options" class="owner-form-inline">
      <el-form-item label="绑定状态:">
        <el-select v-model="options.value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadOwner(current, size,options.value)">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--隐藏审核记录表单-->
    <el-dialog title="审核记录表" :visible.sync="dialogTableVisible">
      <el-table :data="roomRecords">
        <el-table-column property="createTime" label="创建日期" width="250" />
        <el-table-column property="recordAuditOpinion" label="审核意见" width="250" />
        <el-table-column property="createBy" label="创建者" />
      </el-table>
    </el-dialog>
    <!--隐藏审核功能-->
    <el-dialog title="审核表" :visible.sync="dialogRecordVisible">
      <el-form :model="roomRecord">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.communityName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="楼栋名称" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.buildingName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="单元名称" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.unitName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="房间名称" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.roomName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="业主名称" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.ownerRealName" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="业主类型" :label-width="formLabelWidth">
          <el-input v-model="roomRecord.ownerType" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="绑定状态" :label-width="formLabelWidth">
          <el-select v-model="roomRecord.roomStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核建议" :label-width="formLabelWidth">
          <el-input
            v-model="auditOpinion"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditOwner(), dialogRecordVisible = false">通过</el-button>
        <el-button @click="dialogRecordVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--主要表单-->
    <el-table
      :data="owners"
      style="width: 100% ; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) ;margin-top: 1%;margin-left: 2%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="30"
      />
      <el-table-column
        label="序号"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index +1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="小区名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="楼栋名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单元名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="房间名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业主名称"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业主类型"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerType }}</span>
        </template>
      </el-table-column>
      <!--绑定状态-->
      <el-table-column
        label="绑定状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.roomStatus =='Auditing'" style="margin-left: 10px">{{ '审核中' }}</span>
          <span v-else style="margin-left: 10px">{{ '已绑定' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.roomStatus =='Auditing'"
            type="text"
            icon="el-icon-thumb"
            size="mini"
            @click="ownerAudit(scope.$index, scope.row)"
          >审核</el-button>
          <el-button
            v-if="scope.row.roomStatus =='Binding'"
            type="text"
            icon="el-icon-s-order"
            size="mini"
            @click="ownerRecords(scope.$index, scope.row)"
          >审核记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页标签-->
    <div class="owner-pagination">
      <el-pagination
        background
        :current-page="this.current"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="this.size"
        layout=" sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      options: [
        {
          value: 'Binding',
          label: '已绑定'
        },
        {
          value: 'Auditing',
          label: '审核中'
        }
      ],
      size: 3,
      current: 1,
      total: 0,
      status: '',
      owners: [],
      roomRecords: [],
      roomRecord: [],
      ownerRoomRecord: { recordAuditOpinion: '', createTime: '', ownerRoomId: '', roomId: '', roomStatus: '' },
      dialogTableVisible: false,
      dialogRecordVisible: false,
      auditOpinion: '',
      formLabelWidth: '140px'
    }
  },
  created() {
    this.loadOwner(this.current, this.size)
  },
  methods: {
    // 加载页面数据
    loadOwner(current, size, value) {
      this.axios({
        url: '/ownerRooms',
        methods: 'GET',
        params: {
          current: current,
          size: size,
          status: value
        }
      })
        .then(res => {
          this.owners = res.data.data.records
          this.current = res.data.data.current
          this.size = res.data.data.size
          this.total = res.data.data.total
        })
    },
    // 选择菜单栏
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 审核
    ownerAudit(index, row) {
      this.roomRecord = row
      console.log(this.roomRecord)
      this.dialogRecordVisible = true
    },
    // 审核通过，增加审核记录
    auditOwner() {
      this.$confirm('这项操作会改变业主的审核状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.roomRecord)
        this.ownerRoomRecord.ownerRoomId = this.roomRecord.ownerRoomId
        this.ownerRoomRecord.ownerId = this.roomRecord.ownerId
        this.ownerRoomRecord.roomStatus = this.roomRecord.roomStatus
        this.ownerRoomRecord.recordAuditOpinion = this.auditOpinion
        console.log(this.ownerRoomRecord)
        this.axios({
          url: '/ownerRoomRecord/audit?' + this.qs.stringify(this.ownerRoomRecord),
          methods: 'GET'
        })
          .then(res => {
            this.ownerRoomRecord = { recordAuditOpinion: '', createTime: '', ownerRoomId: '', roomId: '', roomStatus: '' }
            this.auditOpinion = ''
            this.loadOwner(this.current, this.size)
          })
        this.$notify({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 审核记录 通过roomId去获取所有的roomRecord
    ownerRecords(index, row) {
      this.dialogTableVisible = true
      this.axios.get('/ownerRoomRecord/' + row.roomId)
        .then(res => {
          this.roomRecords = res.data.data
          console.log(res.data.data)
        })
    },
    // 重置
    resetForm() {
      this.options.value = ''
      this.loadOwner(this.current, this.size)
    },
    // 分页插件
    handleSizeChange(val) {
      this.size = val
      this.loadOwner(this.current, this.size, this.value, this.value)
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadOwner(this.current, this.size, this.value)
    }
  }

}
</script>

<style scoped>
  .owner-form-inline{
    margin-left: 2%;
    margin-top: 2%;
  }
  .owner-pagination{
    margin-left: 1%;
    margin-top: 1%;
  }
</style>
